<template>
  <div class="app-container">
    <Sticky :z-index="10" :class-name="'sub-navbar published'">
<!--      <el-button style="margin-left: 10px; float:left; margin-top: 5px;" type="primary"  @click="">-->
<!--        预留左侧按钮-->
<!--      </el-button>-->
      <CommentDropdown v-model="selectedList"/>
<!--      <el-button style="margin-left: 10px;" type="success" @click="">-->
<!--        预留右侧按钮-->
<!--      </el-button>-->
    </Sticky>

    <el-table v-loading="listLoading" :data="list" :row-class-name="tableRowClassName"
              border fit highlight-current-row style="width: 100%"
              :default-sort = "{prop: 'roleId', order: 'increasing'}">

        <el-table-column align="center" width="50px"  label="序号" type="index" >
          <template slot-scope="scope">
            <span>{{(listQuery.page - 1) * listQuery.limit + scope.$index + 1}}</span>
          </template>
        </el-table-column>

        <el-table-column width="120px" align="center" label="用户ID">
          <template slot-scope="{row}">
              <el-input v-if="row.edit"
                        v-model="row.authName"
                        class="edit-input"
                        size="small" />
              <span v-else>{{ row.authName }}</span>
          </template>
        </el-table-column>

        <el-table-column width="180px" align="center" label="绑定ID">
          <template slot-scope="{row}">
              <el-input v-if="row.edit"
                        v-model="row.stuId"
                        class="edit-input"
                        size="small" />
              <span v-else>{{ row.stuId }}</span>
          </template>
        </el-table-column>

        <el-table-column width="180px" align="center" label="用户名">
          <template slot-scope="{row}">
              <el-input v-if="row.edit"
                        v-model="row.name"
                        class="edit-input"
                        size="small" />
              <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column width="200px" align="center" label="密码">
          <template slot-scope="{row}">
              <el-input v-if="row.edit"
                        v-model="row.password"
                        class="edit-input"
                        size="small" />
              <span v-else>{{ row.password }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" width="120px" prop="roleId" label="角色" sortable>
          <template  slot-scope="{row}">
              <el-input v-if="row.edit"
                        v-model="row.roleId"
                        class="edit-input"
                        size="small" />
              <span v-else>{{ row.roleId | roleFilter}}</span>
          </template>
        </el-table-column>

        <el-table-column min-width="200px" align="center" label="邮箱">
          <template slot-scope="{row}">
              <el-input v-if="row.edit" v-model="row.email" class="edit-input" size="small" />
              <span v-else>{{ row.email }}</span>
          </template>
        </el-table-column>

        <el-table-column class-name="status-col" align="center" width="100px" prop="enableStatus" label="状态" sortable>
          <template slot-scope="{row}">
              <el-tag :type="row.enableStatus | statusStyleFilter">
                {{ row.enableStatus | statusNameFilter }}
              </el-tag>

          </template>
        </el-table-column>

        <el-table-column width="180px" align="center" label="操作"  fixed="right">
          <template slot-scope="{row}">
            <el-row>
              <el-col :span="12">
                <el-button width="100px"
                           v-if="row.edit"
                           type="success"
                           size="small"
                           icon="el-icon-circle-check-outline"
                           @click="confirmEdit(row)"
                >
                  确认
                </el-button>
              </el-col>
              <el-col :span="12">
                <el-button width="100px"
                           v-if="row.edit"
                           size="small"
                           icon="el-icon-refresh"
                           type="warning"
                           @click="cancelEdit(row)">
                  取消
                </el-button>
              </el-col>
            </el-row>

              <el-button width="120"
                         v-if="!row.edit"
                         type="primary"
                         size="small"
                         icon="el-icon-edit"
                         @click="row.edit=!row.edit"
              >
                Edit
              </el-button>

          </template>
        </el-table-column>

    </el-table>

  </div>
</template>

<script>
  import { fetchPersonList,updatePersonInfo,fetchPersonInfo } from '@/api/user'
  import { parseTime } from '@/utils'
  import Sticky from '@/components/Sticky'
  import { CommentDropdown } from './Dropdown'

  export default {
    name: 'userList',
    components:{ Sticky, CommentDropdown },
    filters: {
      statusStyleFilter(status) {
        const statusMap = {
          "1": 'success',
          "0": 'danger'
        }
        return statusMap[status]
      },
      statusNameFilter(status) {
        const statusMap = {
          "1": "正常",
          "0": "已删除"
        }
        return statusMap[status]
      },
      roleFilter(status) {
        const statusMap = {
          "1": "管理员",
          "2": "普通用户",
          "3": "教师",
          "4": "校友",
          "5": "学生"
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        selectedList: 0,
        defaultForm: null,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {

      sortByRole: function ({obj1, obj2}){ // 排序未生效
        let val1 = obj1.roleId;
        let val2 = obj2.roleId;
        console.log(val1);
        return val1 - val2;
      },

      tableRowClassName: function ({row, rowIndex}) {
        if(this.selectedList === 0) return ;

        if(this.selectedList !== row.roleId){
          return 'hidden-row';
        }
      },

      async getList() {
        this.listLoading = true
        await fetchPersonList(this.listQuery).then(response => {
          const items = response.data.list
          this.list = items.map(v => { // 处理items数组（向每个数组成员添加一个属性）
            this.$set(v, 'originalAuthName', v.authName)
            this.$set(v, 'originalStuId', v.stuId)
            this.$set(v, 'originalName', v.name)
            this.$set(v, 'originalPassword', v.password)
            this.$set(v, 'originalRoleId', v.roleId)
            this.$set(v, 'originalEmail', v.email)
            return v
          })
        })
        this.listLoading = false
      },

      fetchInfoById(data,id) {
        fetchPersonInfo(id).then(response => {
          data = response.data
        }).catch(err => {
          console.log(err)
        })
      },

      cancelEdit(row) {
        this.$set(row, 'authName', row.originalAuthName)
        this.$set(row, 'stuId', row.originalStuId)
        this.$set(row, 'name', row.originalName)
        this.$set(row, 'password', row.originalPassword)
        this.$set(row, 'roleId', row.originalRoleId)
        this.$set(row, 'email', row.originalEmail)
        row.edit = false
        this.$message({
          message: '修改失败',
          type: 'warning'
        })
      },

      confirmEdit(row) {
        this.defaultForm=row
        let aData = new Date();
        this.$set(this.defaultForm,'lastEditTime',parseTime(aData))
        // console.log(this.defaultForm)
        updatePersonInfo(this.defaultForm).then(response => {
          this.fetchInfoById(row,row.userId)
          this.$set(row, 'originalAuthName', row.authName)
          this.$set(row, 'originalStuId', row.stuId)
          this.$set(row, 'originalName', row.name)
          this.$set(row, 'originalPassword', row.password)
          this.$set(row, 'originalRoleId', row.roleId)
          this.$set(row, 'originalEmail', row.email)

          this.$message({
            message: '修改成功',
            type: 'success'
          })
          }).catch(err => {
          this.cancelEdit(row)
          console.log(err)
        })
        row.edit = false
      }
    }
  }
</script>

<style>
  .el-table .hidden-row {
    display: none;
  }
</style>

<style scoped>
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
